<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class = "box">

</div>
<script>
/*
循环添加的时候 innerHTML 优化问题


*/
//需求 在页面box中添加10个div标签 div内部写"hello world"

//存在大量的性能消耗
//直接用innerHTML 赋值会每次循环都重新渲染画面

//尽量不要反复直接操作 dom
//将操作转到内存中
//先创建一个字符串：存储我们得出的最终结果

//直接操作
//let box = document.querySelector(".box")
//let n = 10
//for(let i = 0;i < n;i++){
//    box.innerHTML += `<div>hello world</div>`//性能消耗巨大
//}

//间接操作 内存中使用字符串的方法 
let box = document.querySelector(".box")
let n = 10000
let str = ""//str 就是预先存储 box中的字符串内容

for(let i = 0;i < n;i++){
    str += `<div>hello world</div>`//内存操作 性能非常高
}
box.innerHTML = str//这一步才是真正的渲染


</script>
</body>
</html>